<template>
  <div>
    <van-tabs :active="active" bind:change="onChange" title-active-color="#739ECA" title-inactive-color="#666" color="#739ECA" line-height="2px">
      <van-tab title="发起提交">
        <ze-oa-form v-if="formConfig.fields && formConfig.fields.length > 0" :form-config="formConfig" />
      </van-tab>
      <van-tab title="我的数据">
        <my-data :my-data="myList" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import myData from '../myData.vue'
import { getProcessFormConfig } from '@/apis/process'
import ZeOaForm from '@/components/ze-oa-form/index.vue'

export default {
  components: { myData, ZeOaForm },
  onLoad(option) {
    this.name = option.name
  },
  data() {
    return {
      active: 0,
      name: '',
      myList: [],
      formConfig: {},
    }
  },
  mounted() {
    this.loadFormConfig()
    this.getList()
  },
  methods: {
    async loadFormConfig() {
      const { data } = await getProcessFormConfig('test:10:91629f77-319d-11ee-8467-da610b509d97')
      this.formConfig = {
        ...JSON.parse(data.formConf),
        fields: data.formFields.map(JSON.parse),
      }
    },
    onChange(event) {
      wx.showToast({
        title: `切换到标签 ${event.detail.name}`,
        icon: 'none',
      })
    },
    getList() {
      if (this.name === '请假') {
        this.myList = [
          { text: '请假', name: '张三', btn: '已通过', time: '2023.03.26', type: '事假', start: '2023.03.27', end: '2023.03.27' },
          { text: '请假', name: '李四', btn: '已撤销', time: '2023.03.28', type: '事假', start: '2023.03.28', end: '2023.03.28' }]
      } else {
        this.myList = [
          { text: '调休', name: '张三', btn: '已通过', time: '2023.03.26', type: '调休', start: '2023.03.27', end: '2023.03.27' },
          { text: '调休', name: '李四', btn: '已撤销', time: '2023.03.28', type: '调休', start: '2023.03.28', end: '2023.03.28' }]
      }
    },
  },
}
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
.van-sticky{
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
}
</style>
